input::-webkit-input-placeholder {
    color: $--input-placeholder-color;
}
input:-moz-placeholder {
    color: $--input-placeholder-color;
}
input::-moz-placeholder {
    color: $--input-placeholder-color;
}
input:-ms-input-placeholder {
    color: $--input-placeholder-color;
}

input {
    appearance: none; // checkbox 点击无变化
    -webkit-appearance: none; /* Safari and Chrome */
    -moz-appearance: none; /* Firefox */
    background-color: $--input-background-color;
    background-image: none;
    border-radius: $--input-border-radius;
    border: $--input-border;
    box-sizing: border-box;
    color: $--input-font-color;
    display: inline-block;
    font-size: $--input-font-size;
    outline: none;
    height: $--input-height;
    line-height: $--input-height;
    padding: 0 $--padding-medium;
    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    width: 100%;
    cursor: pointer;

    @include hover() {
        border-color: $--input-border-color-hover;
    }

    &:focus {
        outline: none;
        border-color: $--input-focus-border;
    }

    &.foxui-size-medium {
        height: $--input-medium-height;
        line-height: $--input-medium-height;
        font-size: $--input-medium-font-size;
    }

    &.foxui-size-small {
        height: $--input-small-height;
        line-height: $--input-small-height;
        font-size: $--input-small-font-size;
    }

    &.foxui-size-mini {
        height: $--input-mini-height;
        line-height: $--input-mini-height;
        font-size: $--input-mini-font-size;
    }

    &[disabled] {
        cursor: not-allowed;
        background-color: $--input-disabled-fill;
        border-color: $--input-disabled-border;
        color: $--input-disabled-color;
    }
}

// 输入框组
.foxui-input-group {
    display: flex;
    align-items: center;
    position: relative;

    &.foxui-vertical {
        flex-direction: column;
        align-items: flex-start;

        label,
        .label {
            margin-bottom: 10px;
        }
    }

    label,
    .label {
        display: inline-block;
        white-space: nowrap;
        color: $--color-text-primary;
        margin-right: $--padding-small;

        // 必填
        &.foxui-required {
            padding-left: 0.6em;
            position: relative;

            &::before {
                content: '*';
                position: absolute;
                left: 0;
                top: 30%;
                color: $--color-danger;
            }
        }
    }
}

// 前后缀图标
.foxui-input-prefix,
.foxui-input-suffix {
    position: relative;
    flex: 1;
}

// 前缀图标
.foxui-input-prefix {
    input {
        padding-left: $--input-icon-size;
    }

    .foxui-prefix-icon {
        position: absolute;
        left: $--padding-extra-small;
        height: 100%;
        width: $--input-icon-size;
        top: 0;
        text-align: center;
        color: $--input-icon-color;
        transition: $--all-transition;
        pointer-events: none;

        &::before {
            font-size: $--input-icon-font-size;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }
}

// 后缀图标
.foxui-input-suffix {
    input {
        padding-right: $--input-icon-size;
    }

    .foxui-suffix-icon {
        position: absolute;
        right: $--padding-extra-small;
        height: 100%;
        width: $--input-icon-size;
        top: 0;
        text-align: center;
        color: $--input-icon-color;
        transition: $--all-transition;
        pointer-events: none;

        &::before {
            font-size: $--input-icon-font-size;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        // 后缀密码 清空
        &.foxui-suffix-password,
        &.foxui-suffix-clear {
            pointer-events: auto;
            cursor: pointer;

            &:hover {
                color: $--input-clear-hover-color;
            }
        }

        // 后缀统计
        &.foxui-suffix-count {
            font-style: normal;
            height: auto;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }

        // 后缀清空
        &.foxui-suffix-clear {
            transition: $--fade-linear-transition-fast;
            display: none;
        }
    }
}

// 前后缀按钮、选择框 外框
.foxui-input-prepend,
.foxui-input-append {
    line-height: normal;
    display: inline-table;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;

    input {
        position: relative;

        &:hover,
        &:focus {
            z-index: 1;
        }
    }
}

.foxui-input-prepend {
    input {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
}

.foxui-input-append {
    input {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
}

// 前后缀按钮、选择框 内框
.foxui-prepend-inner,
.foxui-append-inner {
    background-color: $--color-white;
    color: $--color-text-secondary;
    vertical-align: middle;
    display: table-cell;
    position: relative;
    border: $--border-base;
    border-radius: $--border-radius-base;
    padding: 0 $--padding-medium;
    width: 1px;
    white-space: nowrap;
    position: relative;

    &.is-grey {
        background-color: $--border-color-extra-light;
    }

    // 修正  select
    .foxui-select {
        display: inline-block;
        margin: -16px;

        .foxui-select-handle {
            width: $--input-icon-size * 2.5; // 可根据内容长短，在页面中设置

            input {
                border-color: transparent !important;
                background-color: transparent;
                color: inherit;
                border-top: 0;
                border-bottom: 0;
                padding-right: $--padding-medium;
            }
        }
    }
}

.foxui-prepend-inner {
    right: -1px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.foxui-append-inner {
    left: -1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

// 前后缀按钮
.foxui-input-button {
    transition: 0.1s;
    cursor: pointer;

    &:hover {
        z-index: 1;
    }

    // 按钮类型
    @include button-type($--color-primary, primary);
    @include button-type($--color-success, success);
    @include button-type($--color-warning, warning);
    @include button-type($--color-danger, danger);
    @include button-type($--color-info, info);

    &.foxui-solid {
        &:not(.is-disabled) {
            @include hover-focus-active() {
                background-color: $--color-primary-light-9;
                color: $--color-primary;
            }

            @include hover-focus() {
                border-color: $--color-primary-light-6;
            }

            @include active() {
                border-color: $--color-primary;
            }
        }
    }

    &.foxui-plain {
        &:not(.is-disabled) {
            @include hover-focus-active {
                background-color: $--color-white;
            }

            @include hover-focus() {
                color: $--color-primary;
                border-color: $--color-primary;
            }

            @include active() {
                color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
                border-color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
            }
        }
    }
}
